<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <script src="static/js/vue.js"></script>
</head>
<body>

    <!--1.一个容器-->
    <div id="app">
        <h1 style="text-align: center;">购物车</h1>
        <table class="table  table-striped table-bordered">
            <tr>
                <th>
                    名称
                </th>
                <th>
                    数量
                </th>
                <th>
                   单价
                </th>
                <th>
                    小计（自己写）
                </th>
                <th>
                    删除
                </th>
            </tr>
            <tbody>
                <tr v-for="(book,i) in books">
                    <td>{{book.name}}</td>
                    <td>
                      <!--
                       @click  绑定一个事件  可以直接访问vue中的数据
                       onclick
                       :disabled="book.num<=1"   明天讲  先理解
                      -->
                        <button class="btn" :disabled="book.num<=1"     @click="decreaseFun(i)">-</button>
                        {{book.num}}
                        <button class="btn" @click="increaseFun(i)">+</button>
                    </td>
                    <td>{{book.price}}</td>
                    <td>{{book.price}}</td>
                    <td>
                       <button class="btn-danger" @click="del(i)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <h1><em style="color: red;">￥{{totalPrice}}</em>元</h1>


    </div>

    <!--{{username}}-->

    <script type="text/javascript">





       // var username = $("#username").val();
        //2.创建vue的实例
       // 页面展示：helloworld!!
       //练习：用一个页面实现： 默认显示商品列，如果点了新增按钮，则显示：一个新增商品的表单。

        var app = new Vue({
            el:"#app",//vue实现的挂载点  dom的id
            //vue中的数据定义
            //1） 用户录入  2） 服务端返回的  3）静态数据
            data:{

                books:[{name:"java入门到放弃",num:1,price:100},{name:"java入门到放弃1",
                    num:1,price:101},{name:"java入门到放弃2",num:1,price:102}]

                //购物车
            },
            methods:{

                 decreaseFun(n){

                    console.log(n);

                        this.books[n].num--;


            //console.log(k);

         },
                increaseFun(n){


                       this.books[n].num++;




             },
                del(i){
                     this.books.splice(i,1);//删除元素  i是下标，1删除元素的个数
                }
            },
            computed:{
                totalPrice(){
                    let  totalP =0;
                    for(let i=0;i<this.books.length;i++){
                        totalP+=this.books[i].price*this.books[i].num;
                    }

                    return totalP;

                }
            }

        });


    </script>

</body>
</html>